<template>
    <!-- 组件的模板 -->
    <div class="page wx-invite">
        <div class="bg"></div>        
        <div class="layer_2">
            <div class="top">
                <p>请员工使用微信扫一扫<br>扫二维码点到</p>
            </div>
            <img class="divider" src="../../static/imgs/divider.png" alt="">
            <div class="content">
                <div class="pic-box">
                    <img v-if="hideImg" src="../../static/imgs/qrcode_2.png" alt="">
                    <div id="div_div"></div>
                </div>
                <p class="tip">二维码每分钟自动更新</p>
                <a v-if="signFlag == true" href="javascript:;" class="weui-btn weui-btn_primary" @click="startSceneSign" >开始点到  </a>
                <a v-if="signFlag == false" href="javascript:;" class="weui-btn weui-btn_primary" @click="stopSceneSign" >结束点到  </a>
            </div>
        </div>
    </div>
        
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

     var timer;
     let apiHost = ""
     
     import cache from 'gapi/cache.js'
     import * as util from 'js/util.js'
     import commonPage from 'clientApi/commonPage.js'
     import widget from 'gapi/widget'
     import clientInfo from 'gapi/clientInfo.js'
     import KCApiApp from 'clientApi/KCApiApp.js'
     // import 'js/jquery-1.8.2.js'
     import 'js/excanvas.js'
     import 'js/qrcode.js'

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                hideImg: true,
                signFlag: true,  //开始点到的标志位
                user_info_sign: {
                    team_id: 0,
                    project_id: 0,
                    user_id: 0
                },
                canvas_width: 0
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init(){
                
               
            },

            //开始点到按钮点击
            startSceneSign(){
                //埋点
                let statisticsLog_data = {
                    event_id: '位置上报-开始点到',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'start',
                        project_id: this.user_info_sign.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)

                const that = this
                cache.getCache('user_info_sign', (data) => {
                    // alert(JSON.stringify("data" + data));
                    that.user_info_sign = data
                    that.proofreadTimeRequest(data);
                })
            },

            //结束点到
            stopSceneSign(){
                //埋点
                let statisticsLog_data = {
                    event_id: '位置上报-结束点到',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'end',
                        project_id: this.user_info_sign.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                
                $('#div_div').empty()
                this.hideImg = true;
                this.signFlag = true;
                clearInterval(timer);
            },

            createQRcode(){
                let date = new Date()
                let timestr = date.getTime()
                var text = `https://work.doumi.com/h5/yy_scancoderesult.html?keeper_id=${this.user_info_sign.user_id}&project_id=${this.user_info_sign.project_id}&team_id=${this.user_info_sign.team_id}&keeper_time=${timestr}`;
                $('#div_div').qrcode({
                    render: 'canvas',
                    text: this.utf16to8(text),
                    height: this.canvas_width,
                    width: this.canvas_width,
                    //logo图片地址
                    src: 'http://sta.doumistatic.com/src/image/logo_doumi.png'
                });
                // alert(text);
            },

            utf16to8(str){
                var out, i, len, c;
                out = "";
                len = str.length;
                for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
                }
                return out;
            },

            //项目管理员时间校正
            proofreadTimeRequest(user_info_sign){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/sign/live/calibrate',
                    type: 'GET',
                    data: {
                        'team_id':user_info_sign.team_id,
                        'project_id':user_info_sign.project_id
                        // 'team_id':123,
                        // 'project_id':123
                    },
                    success: (res) => {
                        commonPage.loadPageStatus('loadSuccess')
                        // res = JSON.parse(res)
                        console.log(res)  
                        if(res&&res.errno==0) {
                            this.hideImg = false;
                            this.signFlag = false;
                            this.createQRcode()
                            timer = setInterval(() => {
                                $('#div_div').empty()
                                this.createQRcode()
                            },1000*60);
                        } else if (res.errno==21015) {
                             // this.showEmpty = true
                        } else if (res.errmsg) {
                             widget.toast(res.errmsg)
                        } else {
                             widget.toast('数据获取失败')
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            }
        },
        created(){
            this.init();
        },
        ready(){
            setTimeout(() => {
                $('#div_div').width($('.pic-box').width()-120)
                // $('#div_div').height($('.pic-box').width()-120)
                this.canvas_width = $('.pic-box').width()-120
                // alert(this.canvas_width)
            }, 100)
            this.$watch('hideImg', (newVal, oldVal) => {
                if(newVal){
                    $('#div_div').height(0)
                }else{
                    $('#div_div').height($('.pic-box').width()-120)
                }
            })
        }
    }
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/wx-invite.css"></style>


